<svg #svg *ngIf="portComponent1 && portComponent2 && portComponent1.port != null && portComponent2.port != null" [class.read-only]="isReadOnly">
	<linearGradient id="linear-{{connectionID}}" x1="0" y1="0" x2="100%" y2="0">
		<stop offset="0%"   [attr.stop-color]="portComponent1.LogicPort.parent.color"/>
		<stop offset="100%" [attr.stop-color]="portComponent2.LogicPort.parent.color"/>
	</linearGradient>
	<path id="conn-{{connectionID}}" #mainPath class="main" [attr.d]="line" [attr.stroke]="'url(#linear-' + connectionID + ')'"/>
	<text text-anchor="middle" class="title">
		<textPath startOffset="50%" [attr.href]="'#conn-' + connectionID">
			{{LogicConnection.title}}
		</textPath>
	</text>
	<g class="line-breaks-container" [class.active]="LogicConnection.lineBreaks.includes(selectionService.currentLineBreakSelection)">
		<path #secondPath class="interactive"(click)="handleClick()" [attr.d]="line"/>
		<ng-container *ngFor="let break of LogicConnection.lineBreaks; index as i">
			<circle class="break" [class.is-current-selection]="selectionService.currentLineBreakSelection != null && selectionService.currentLineBreakSelection.x === break.x && selectionService.currentLineBreakSelection.y === break.y" 
				r="6" *ngIf="i > 0 && i < LogicConnection.lineBreaks.length - 1"
				[attr.cx]="break.x" [attr.cy]="break.y"
				(mousedown)="moveLine(break, $event)" (touchstart)="moveLine(break, $event)">
			</circle>
			<circle *ngIf="i < LogicConnection.lineBreaks.length - 1" class="break-available" r="4"
				[attr.cx]="(break.x + LogicConnection.lineBreaks[i+1].x)/2"
				[attr.cy]="(break.y + LogicConnection.lineBreaks[i+1].y)/2"
				(mousedown)="breakLine(break, LogicConnection.lineBreaks[i+1], $event)"
				(touchstart)="breakLine(break, LogicConnection.lineBreaks[i+1], $event)">
			</circle>		
		</ng-container>
	</g>
</svg>
<div *ngIf="selectionService.currentConnectionSelection === this" [style.top.px]="titlePopupY" [style.left.px]="titlePopupX"class="title-popup">
	<span>Title: </span>
	<input type="text" [(ngModel)]="LogicConnection.title"/>
</div>
